TypeScript Monorepo: kelių paketų tipų dalijimosi strategijos

Monorepos, saugyklos, kuriose yra keli paketai ar projektai, tapo vis populiaresnės valdant dideles kodų bazes. Jie siūlo keletą privalumų, įskaitant patobulintą kodo dalijimąsi, supaprastintą priklausomybių valdymą ir sustiprintą bendradarbiavimą. Tačiau norint efektyviai dalytis TypeScript tipais tarp paketų monorepo, reikia kruopštaus planavimo ir strateginio įgyvendinimo.

Kodėl verta naudoti Monorepo su TypeScript?

Prieš gilindamiesi į tipų dalijimosi strategijas, apsvarstykime, kodėl monorepo metodas yra naudingas, ypač dirbant su TypeScript:

• Kodo pakartotinis naudojimas: Monorepos skatina kodo komponentų pakartotinį naudojimą skirtinguose projektuose. Bendri tipai yra pagrindiniai, užtikrinantys nuoseklumą ir sumažinantys perteklių. Įsivaizduokite UI biblioteką, kurioje komponentų tipo apibrėžimai naudojami keliose priekinės dalies programose.
• Supaprastintas priklausomybių valdymas: Priklausomybės tarp paketų monorepo paprastai valdomos viduje, todėl nereikia publikuoti ir naudoti paketų iš išorinių registrų vidinėms priklausomybėms. Tai taip pat leidžia išvengti versijų konfliktų tarp vidinių paketų. Tokie įrankiai kaip `npm link`, `yarn link` arba sudėtingesni monorepo valdymo įrankiai (pvz., Lerna, Nx arba Turborepo) tai palengvina.
• Atominiai pakeitimai: Pakeitimai, apimantys kelis paketus, gali būti įsipareigoti ir versijuojami kartu, užtikrinant nuoseklumą ir supaprastinant leidimus. Pavyzdžiui, refaktoringas, kuris veikia ir API, ir priekinės dalies klientą, gali būti atliktas vienu įsipareigojimu.
• Patobulintas bendradarbiavimas: Viena saugykla skatina geresnį bendradarbiavimą tarp kūrėjų, suteikdama centralizuotą visų kodų vietą. Visi gali pamatyti kontekstą, kuriame veikia jų kodas, o tai pagerina supratimą ir sumažina nesuderinamo kodo integravimo galimybę.
• Lengvesnis refaktoringas: Monorepos gali palengvinti didelio masto refaktoringą tarp kelių paketų. Integruota TypeScript palaikymas visame monorepo padeda įrankiams nustatyti kritinius pakeitimus ir saugiai refaktoringuoti kodą.

Tipų dalijimosi monorepos iššūkiai

Nors monorepos siūlo daug privalumų, efektyvus tipų dalijimasis gali kelti tam tikrų iššūkių:

• Ciklinės priklausomybės: Būtina pasirūpinti, kad būtų išvengta ciklinės priklausomybės tarp paketų, nes tai gali sukelti surinkimo klaidas ir vykdymo problemas. Tipo apibrėžimai gali lengvai tai sukurti, todėl reikia kruopščios architektūros.
• Surinkimo našumas: Didelės monorepos gali patirti lėtą surinkimo laiką, ypač jei vieno paketo pakeitimai sukelia daugelio priklausomų paketų pakartotinį surinkimą. Norint tai išspręsti, būtini pridedamojo surinkimo įrankiai.
• Sudėtingumas: Valdant didelį paketų skaičių vienoje saugykloje, gali padidėti sudėtingumas, reikalaujantis patikimų įrankių ir aiškių architektūros gairių.
• Versijų valdymas: Sprendžiant, kaip versijuoti paketus monorepo viduje, reikia atidžiai apsvarstyti. Dažniausiai naudojami nepriklausomas versijų valdymas (kiekvienas paketas turi savo versijos numerį) arba fiksuotas versijų valdymas (visi paketai dalijasi tuo pačiu versijos numeriu).

TypeScript tipų dalijimosi strategijos

Štai kelios strategijos, kaip dalytis TypeScript tipais tarp paketų monorepo, kartu su jų privalumais ir trūkumais:

1. Bendras tipų paketas

Paprastiausia ir dažnai efektyviausia strategija yra sukurti specialų paketą, skirtą bendriems tipo apibrėžimams saugoti. Šį paketą vėliau gali importuoti kiti paketai monorepo viduje.

Įgyvendinimas:

1. Sukurkite naują paketą, paprastai pavadintą pvz., `@your-org/types` arba `shared-types`.
2. Apibrėžkite visus bendrus tipo apibrėžimus šiame pakete.
3. Paskelbkite šį paketą (viduje arba išorėje) ir importuokite jį į kitus paketus kaip priklausomybę.

Pavyzdys:

Tarkime, turite du paketus: `api-client` ir `ui-components`. Norite bendrai naudoti `User` objekto tipo apibrėžimą tarp jų.

`@your-org/types/src/user.ts`:

            export interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

            

              
                Copy
              
            
          

`api-client/src/index.ts`:

            import { User } from '@your-org/types';

export async function fetchUser(id: string): Promise<User> {
  // ... fetch user data from API
}

            

              
                Copy
              
            
          

`ui-components/src/UserCard.tsx`:

            import { User } from '@your-org/types';

interface Props {
  user: User;
}

export function UserCard(props: Props) {
  return (
    <div>
      <h2>{props.user.name}</h2>
      <p>{props.user.email}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Privalumai:

• Paprasta ir aišku: Lengva suprasti ir įgyvendinti.
• Centralizuoti tipo apibrėžimai: Užtikrina nuoseklumą ir sumažina dubliavimąsi.
• Aiški priklausomybė: Aiškiai apibrėžia, kurie paketai priklauso nuo bendrų tipų.

Trūkumai:

• Reikia publikuoti: Net ir vidiniams paketams publikavimas dažnai yra būtinas.
• Versijos valdymas: Keičiant bendrų tipų paketą, gali tekti atnaujinti priklausomybes kituose paketuose.
• Galimas per didelis apibendrinimas: Bendrų tipų paketas gali tapti per platus, kuriame yra tipų, naudojamų tik keliuose paketuose. Tai gali padidinti bendrą paketo dydį ir galbūt įvesti nereikalingas priklausomybes.

2. Kelio slapyvardžiai

TypeScript kelio slapyvardžiai leidžia susieti importo kelius su konkrečiais katalogais monorepo viduje. Tai gali būti naudojama bendriems tipo apibrėžimams be aiškaus atskiro paketo kūrimo.

Įgyvendinimas:

1. Apibrėžkite bendrus tipo apibrėžimus nurodytame kataloge (pvz., `shared/types`).
2. Konfigūruokite kelio slapyvardžius kiekvieno paketo, kuriam reikia pasiekti bendrus tipus, `tsconfig.json` faile.

Pavyzdys:

`tsconfig.json` (in `api-client` and `ui-components`):

            {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@shared/*": ["../shared/types/*"]
    }
  }
}

            

              
                Copy
              
            
          

`shared/types/user.ts`:

            export interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

            

              
                Copy
              
            
          

`api-client/src/index.ts`:

            import { User } from '@shared/user';

export async function fetchUser(id: string): Promise<User> {
  // ... fetch user data from API
}

            

              
                Copy
              
            
          

`ui-components/src/UserCard.tsx`:

            import { User } from '@shared/user';

interface Props {
  user: User;
}

export function UserCard(props: Props) {
  return (
    <div>
      <h2>{props.user.name}</h2>
      <p>{props.user.email}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Privalumai:

• Nereikia publikuoti: Panaikina būtinybę publikuoti ir naudoti paketus.
• Paprasta konfigūruoti: Kelio slapyvardžius palyginti lengva nustatyti `tsconfig.json`.
• Tiesioginė prieiga prie šaltinio kodo: Bendrų tipų pakeitimai nedelsiant atsispindi priklausomuose paketuose.

Trūkumai:

• Netiesioginės priklausomybės: Priklausomybės nuo bendrų tipų nėra aiškiai deklaruojamos `package.json`.
• Kelių problemos: Gali tapti sudėtinga valdyti didėjant monorepo ir sudėtingėjant katalogo struktūrai.
• Galimi pavadinimų konfliktai: Reikia pasirūpinti, kad būtų išvengta pavadinimų konfliktų tarp bendrų tipų ir kitų modulių.

3. Kompoziciniai projektai

TypeScript kompozicinių projektų funkcija leidžia struktūrizuoti savo monorepo kaip tarpusavyje susijusių projektų rinkinį. Tai leidžia atlikti laipsnišką surinkimą ir patobulinti tipo patikrinimą tarp paketų ribų.

Įgyvendinimas:

1. Sukurkite `tsconfig.json` failą kiekvienam paketui monorepo.
2. `tsconfig.json` faile paketų, kurie priklauso nuo bendrų tipų, pridėkite masyvą `references`, kuris nukreipia į `tsconfig.json` failą paketo, kuriame yra bendri tipai.
3. Įjunkite parinktį `composite` kiekvieno `tsconfig.json` failo `compilerOptions`.

Pavyzdys:

`shared-types/tsconfig.json`:

            {
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "outDir": "dist",
    "rootDir": "src",
    "strict": true
  },
  "include": ["src"]
}

            

              
                Copy
              
            
          

`api-client/tsconfig.json`:

            {
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "outDir": "dist",
    "rootDir": "src",
    "strict": true
  },
  "include": ["src"],
  "references": [{
    "path": "../shared-types"
  }]
}

            

              
                Copy
              
            
          

`ui-components/tsconfig.json`:

            {
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "outDir": "dist",
    "rootDir": "src",
    "strict": true
  },
  "include": ["src"],
  "references": [{
    "path": "../shared-types"
  }]
}

            

              
                Copy
              
            
          

`shared-types/src/user.ts`:

            export interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

            

              
                Copy
              
            
          

`api-client/src/index.ts`:

            import { User } from 'shared-types';

export async function fetchUser(id: string): Promise<User> {
  // ... fetch user data from API
}

            

              
                Copy
              
            
          

`ui-components/src/UserCard.tsx`:

            import { User } from 'shared-types';

interface Props {
  user: User;
}

export function UserCard(props: Props) {
  return (
    <div>
      <h2>{props.user.name}</h2>
      <p>{props.user.email}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Privalumai:

• Laipsniškas surinkimas: Perrenkami tik pakeisti paketai ir jų priklausomybės.
• Patobulintas tipo patikrinimas: TypeScript atlieka kruopštesnį tipo patikrinimą tarp paketų ribų.
• Aiški priklausomybė: Priklausomybės tarp paketų aiškiai apibrėžiamos `tsconfig.json`.

Trūkumai:

• Sudėtingesnė konfigūracija: Reikalinga daugiau konfigūracijos nei bendro paketo ar kelio slapyvardžių metodai.
• Galimos ciklinės priklausomybės: Būtina pasirūpinti, kad būtų išvengta ciklinės priklausomybės tarp projektų.

4. Bendrų tipų paketo susiejimas (deklaracijos failai)

Kai paketas sukuriamas, TypeScript gali generuoti deklaracijos failus (`.d.ts`), kurie aprašo eksportuoto kodo formą. Šie deklaracijos failai gali būti automatiškai įtraukti, kai paketas įdiegiamas. Galite tai panaudoti norėdami įtraukti bendrus tipus kartu su atitinkamu paketu. Tai paprastai naudinga, jei kitiems paketams reikia tik kelių tipų ir jie yra neatskiriamai susieti su paketu, kuriame jie apibrėžti.

Įgyvendinimas:

1. Apibrėžkite tipus pakete (pvz., `api-client`).
2. Įsitikinkite, kad `compilerOptions` to paketo `tsconfig.json` turi `declaration: true`.
3. Sukurkite paketą, kuris generuos `.d.ts` failus kartu su „JavaScript“.
4. Kiti paketai gali įdiegti `api-client` kaip priklausomybę ir importuoti tipus tiesiogiai iš jo.

Pavyzdys:

`api-client/tsconfig.json`:

            {
  "compilerOptions": {
    "declaration": true,
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "outDir": "dist",
    "rootDir": "src",
    "strict": true
  },
  "include": ["src"]
}

            

              
                Copy
              
            
          

`api-client/src/user.ts`:

            export interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

            

              
                Copy
              
            
          

`api-client/src/index.ts`:

            export * from './user';

export async function fetchUser(id: string): Promise<User> {
  // ... fetch user data from API
}

            

              
                Copy
              
            
          

`ui-components/src/UserCard.tsx`:

            import { User } from 'api-client';

interface Props {
  user: User;
}

export function UserCard(props: Props) {
  return (
    <div>
      <h2>{props.user.name}</h2>
      <p>{props.user.email}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Privalumai:

• Tipai yra sujungti su kodu, kurį jie aprašo: Tipai glaudžiai susiejami su juos sukūrusiu paketu.
• Nereikia atskiro publikavimo etapo tipams: Tipai automatiškai įtraukiami į paketą.
• Paprastesnis priklausomybių valdymas susijusiems tipams: Jei UI komponentas yra glaudžiai susietas su API kliento vartotojo tipu, šis metodas gali būti naudingas.

Trūkumai:

• Tipai susiejami su konkrečiu įgyvendinimu: Atskirai naudoti tipus tampa sunkiau, nepriklausomai nuo įgyvendinimo paketo.
• Galimas didesnis paketo dydis: Jei pakete yra daug tipų, kurie naudojami tik keliuose kituose paketuose, tai gali padidinti bendrą paketo dydį.
• Mažiau aiškus rūpesčių atskyrimas: Maišomi tipo apibrėžimai su įgyvendinimo kodu, todėl gali būti sunkiau apmąstyti kodų bazę.

Tinkamos strategijos pasirinkimas

Geriausia TypeScript tipų dalijimosi strategija monorepo priklauso nuo konkrečių jūsų projekto poreikių. Apsvarstykite šiuos veiksnius:

• Bendrų tipų skaičius: Jei turite nedidelį bendrų tipų skaičių, gali pakakti bendro paketo arba kelio slapyvardžių. Esant dideliam bendrų tipų skaičiui, kompoziciniai projektai gali būti geresnis pasirinkimas.
• Monorepo sudėtingumas: Paprastiems monorepo gali būti lengviau valdyti bendrą paketą arba kelio slapyvardžius. Sudėtingesniems monorepo kompoziciniai projektai gali užtikrinti geresnę organizaciją ir surinkimo našumą.
• Bendrų tipų pakeitimo dažnumas: Jei bendri tipai dažnai keičiasi, kompoziciniai projektai gali būti geriausias pasirinkimas, nes jie leidžia atlikti laipsnišką surinkimą.
• Tipų susiejimas su įgyvendinimu: Jei tipai yra glaudžiai susiję su konkrečiais paketais, tipų susiejimas naudojant deklaracijos failus turi prasmę.

Geriausia tipų dalijimosi praktika

Nepriklausomai nuo jūsų pasirinktos strategijos, čia pateikiama keletas geriausių TypeScript tipų dalijimosi monorepo praktikos:

• Venkite ciklinės priklausomybės: Kruopščiai suplanuokite savo paketus ir jų priklausomybes, kad išvengtumėte ciklinės priklausomybės. Naudokite įrankius jiems aptikti ir užkirsti jiems kelią.
• Laikykite tipo apibrėžimus glaustus ir sutelktus: Venkite kurti per plačius tipo apibrėžimus, kurie nenaudojami visuose paketuose.
• Naudokite aprašomuosius tipų pavadinimus: Pasirinkite pavadinimus, kurie aiškiai nurodo kiekvieno tipo paskirtį.
• Dokumentuokite tipo apibrėžimus: Pridėkite komentarus prie tipo apibrėžimų, kad paaiškintumėte jų paskirtį ir naudojimą. Skatinami JSDoc stiliaus komentarai.
• Naudokite nuoseklų kodavimo stilių: Laikykitės nuoseklaus kodavimo stiliaus visuose monorepo paketuose. Tam naudingi linijos ir formatuotojai.
• Automatizuokite surinkimą ir testavimą: Nustatykite automatizuotus surinkimo ir testavimo procesus, kad užtikrintumėte savo kodo kokybę.
• Naudokite monorepo valdymo įrankį: Tokie įrankiai kaip Lerna, Nx ir Turborepo gali padėti valdyti monorepo sudėtingumą. Jie siūlo tokias funkcijas kaip priklausomybių valdymas, surinkimo optimizavimas ir pakeitimų aptikimas.

Monorepo valdymo įrankiai ir TypeScript

Keli monorepo valdymo įrankiai puikiai palaiko TypeScript projektus:

• Lerna: Populiarus įrankis JavaScript ir TypeScript monorepo valdymui. Lerna teikia funkcijas priklausomybėms valdyti, paketus publikuoti ir vykdyti komandas keliuose paketuose.
• Nx: Galinga surinkimo sistema, palaikanti monorepos. Nx teikia funkcijas laipsniškam surinkimui, kodo generavimui ir priklausomybių analizei. Jis gerai integruojasi su TypeScript ir puikiai palaiko sudėtingų monorepo struktūrų valdymą.
• Turborepo: Dar viena didelio našumo surinkimo sistema JavaScript ir TypeScript monorepo. Turborepo sukurta greičiui ir mastelio keitimui, ji siūlo tokias funkcijas kaip nuotolinis talpyklos ir lygiagretus užduočių vykdymas.

Šie įrankiai dažnai tiesiogiai integruojasi su TypeScript kompozicinių projektų funkcija, supaprastindami surinkimo procesą ir užtikrindami nuoseklų tipo patikrinimą visame jūsų monorepo.

Išvada

Efektyvus TypeScript tipų dalijimasis monorepo yra labai svarbus norint išlaikyti kodo kokybę, sumažinti dubliavimąsi ir pagerinti bendradarbiavimą. Pasirinkę tinkamą strategiją ir vadovaudamiesi geriausia praktika, galite sukurti gerai struktūrizuotą ir prižiūrimą monorepo, kuris keičiasi atsižvelgiant į jūsų projekto poreikius. Atidžiai apsvarstykite kiekvienos strategijos privalumus ir trūkumus ir pasirinkite tą, kuri geriausiai atitinka jūsų konkrečius reikalavimus. Nepamirškite teikti pirmenybę kodo aiškumui, prižiūrimumui ir surinkimo našumui kurdami savo monorepo architektūrą.

JavaScript ir TypeScript kūrimo aplinkai ir toliau vystantis, būtina nuolat domėtis naujausiais monorepo valdymo įrankiais ir metodais. Išbandykite skirtingus metodus ir pritaikykite savo strategiją augant ir keičiantis jūsų projektui.